<template>
    <div>
        <h1>Father组件 路由入门</h1>
        <hr>
        <p>
            <!--使用 router-link 组件进行导航 -->
            <!--通过传递 `to` 来指定链接 -->
            <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
            <router-link to="/">Go to Login</router-link>
            <router-link to="/home">Go to Home</router-link>
        </p>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script setup>
/**
 * 路由： router 执行组件之间的导航（加载指定的组件）
 * 根据导航的url地址加载指定的组件
 * 跳转页面
 * 由于 vue 工程结构属性是单页面
 * 单页面不能进行真正的页面跳转，只能通过DOM节点更换
 * ‘#’开头表示页面中哈希值的改变
 * 
 * 下载 路由模块
 * npm i vue-router
 * 
 */

</script>

<style lang="scss" scoped>

</style>